<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{name}}</div>
        <div v-if="flag" v-text="message"></div>
        <div v-else v-html="message1"></div>

        <div>
            <ul>
                <li v-for="(item, index) in titles">{{index}}-{{item}}</li>
            </ul>
        </div>

        <div>
            <ul>
                <li v-for="(value, key) in book">{{key}}-{{value}}</li>
            </ul>
        </div>

        <div>
            <input type="text" v-model="age" />
            <button @click="onClick">提交</button>
        </div>
    </div>
</body>
<script>
    const {createApp, ref, reactive} = Vue
    const name = 'zhangsan'
    const message = 'hello, zzm'
    const message1 = '<div style="background-color: red">hello, geek</div>'
    const flag = true
    const titles = ['七秀', '长歌', '藏剑']
    const age = ref(18)

    const app = {

        setup() {
            function onClick() {
                alert(age.value)
            }

            return {
                name,
                message,
                message1,
                flag,
                age,
                titles,
                book: {
                    "title": "朝花夕拾",
                    "author": "鲁迅",
                    "pubdate": "2021"
                },
                onClick
            }
        }
    }

    createApp(app).mount('#app')
</script>
</html>